.data-grid {
  --data-grid-vertical-spacing: 2px;
  --data-grid-horizontal-spacing: var(--mantine-spacing-sm);
  --data-grid-header-background-color: var(--mantine-color-blue-light);
  --data-grid-selection-background-color: var(--mantine-color-blue-light);
  --data-grid-selection-border-color: var(--mantine-color-blue-filled);
  --data-grid-border-color: light-dark(
    var(--mantine-color-gray-3),
    var(--mantine-color-dark-4)
  );
  --data-grid-hover-background-color: light-dark(
    var(--mantine-color-gray-light-hover),
    var(--mantine-color-dark-light-hover)
  );

  display: grid;
  grid-auto-rows: minmax(24px, auto);
  width: fit-content;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--data-grid-border-color);
  border-left: none;
}

.cell {
  position: relative;
  border: 1px solid var(--data-grid-border-color);
  padding: var(--data-grid-vertical-spacing) var(--data-grid-horizontal-spacing);

  &.header {
    position: sticky;
    background-color: var(--data-grid-header-background-color);
    backdrop-filter: blur(20px);

    &.origin {
      top: 0;
      left: 0;
      z-index: 3;
    }

    &.column {
      top: 0;
      z-index: 1;
    }

    &.row {
      left: 0;
      z-index: 2;
    }
  }

  &.selected {
    border-color: var(--data-grid-selection-border-color);

    &:not(.single-selected) {
      background-color: var(--data-grid-selection-background-color);
    }

    &.has-top {
      border-top-color: var(--data-grid-border-color);
    }

    &.has-bottom {
      border-bottom-color: var(--data-grid-border-color);
    }

    &.has-left {
      border-left-color: var(--data-grid-border-color);
    }

    &.has-right {
      border-right-color: var(--data-grid-border-color);
    }
  }

  &:hover::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background-color: var(--data-grid-hover-background-color);
  }
}

.dropdown {
  padding: 0;
  min-width: 360px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.affix {
  transform: translateX(-50%);
}
